<template>
	<!-- 添加地址 -->
	<view>
		<!-- #ifdef APP-PLUS -->
		<view class="status_bar"></view>  
		<!-- #endif -->
		<navbar title="收货地址" />
		<view class="main">
			<view class="item">
				<text>收货地址</text>
				<input type="text" v-model="addresspcd" disabled placeholder="选择省市区" placeholder-class="place" @click="show=true" style="padding-right: 60rpx;" />
				<image src="/static/images/more.png"></image>
			</view>
			<u-picker v-model="show" mode="region" @confirm="selectAddress"></u-picker>
			<view class="item">
				<text>详细地址</text>
				<input type="text" v-model="address" placeholder="填写详细地址" placeholder-class="place" />
			</view>
			<view class="item">
				<text>联系人</text>
				<input type="text" v-model="contact_name" placeholder="填写收货人真实姓名" placeholder-class="place" />
			</view>
			<view class="item">
				<text>手机号</text>
				<input type="number" v-model="contact_phone" maxlength="11" placeholder="填写收货人手机号码" placeholder-class="place" />
			</view>
			<view class="isdefault">
				<text>默认地址</text>
				<view class="isdefault" @click.stop="changeStatus()">
					<image src="/static/images/mine/switch1.png" v-if="is_master == 0"></image>
					<image src="/static/images/mine/switch2.png" v-else></image>
				</view>
			</view>
			<view class="btn" @click="confirm">
				<image src="/static/images/btnbg.png"></image>
				<text>确定</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id:'',
				contact_name:'',//姓名
				contact_phone:'',//手机号
				province:'',//省
				city:'',//市
				district:'',//区
				addresspcd:'',//地址省市区
				address:'',//详细地址
				is_master:0,//是否默认地址 0 不默认 1 默认
				show: false
			}
		},
		onLoad(opt) {
			console.log(opt);
			if(JSON.stringify(opt)!=='{}'){
				this.id = opt.id;
				this.contact_name = opt.contact_name;
				this.contact_phone = opt.contact_phone;
				this.province = opt.province;
				this.city = opt.city;
				this.district = opt.district;
				this.addresspcd = this.province + this.city + this.district;
				this.address = opt.address;
				this.is_master = opt.is_master;
			}
		},
		methods: {
			//选择省市区
			selectAddress(e){
				this.province = e.province.label;
				this.city = e.city.label;
				this.district = e.area.label;
				this.addresspcd = this.province + this.city + this.district;
			},
			//设为默认
			changeStatus(){
				if(this.is_master==0){
					this.is_master = 1;
				}else{
					this.is_master = 0;
				}
			},
			//新增地址  编辑地址
			addressAdd(){
				if(this.id=='' || this.id==undefined){
					uni.showLoading({
						title:'添加中...'
					})
					this.$api.addressadd({
						contact_name:this.contact_name,
						contact_phone:this.contact_phone,
						province:this.province,
						city:this.city,
						district:this.district,
						address:this.address,
						is_master:this.is_master
					}).then(res=>{
						uni.hideLoading();
						uni.showToast({
							title:'添加成功'
						})
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
					})
				}else{
					uni.showLoading({
						title:'修改中...'
					})
					this.$api.addressedit({
						address_id:this.id,
						contact_name:this.contact_name,
						contact_name:this.contact_name,
						contact_phone:this.contact_phone,
						province:this.province,
						city:this.city,
						district:this.district,
						address:this.address,
						is_master:this.is_master
					}).then(res=>{
						uni.hideLoading();
						uni.showToast({
							title:'修改成功'
						})
						setTimeout(()=>{
							uni.navigateBack();
						},1000)
					})
				}
			},
			//确定添加
			confirm(){
				if(this.contact_name =='' || this.contact_name==undefined){
					uni.showToast({
						title:'请填写收货人姓名',
						icon:'none'
					})
					return
				}
				if(this.contact_phone =='' || this.contact_phone==undefined){
					uni.showToast({
						title:'请填写收货人手机号码',
						icon:'none'
					})
					return
				}
				if(!/^[1][3,4,5,6,7,8,9][0-9]{9}$/.test(this.contact_phone)){
					uni.showToast({
						title:'手机号码不正确，请重新填写',
						icon:'none'
					})
					return
				}
				if(this.addresspcd =='' || this.addresspcd==undefined){
					uni.showToast({
						title:'请选择省市区',
						icon:'none'
					})
					return
				}
				if(this.address =='' || this.address==undefined){
					uni.showToast({
						title:'请填写详细地址',
						icon:'none'
					})
					return
				}
				this.addressAdd();
			}
		}
	}
</script>

<style lang="scss">
page{
	background-color: $page;
	padding: calc(var(--status-bar-height) + 100rpx) 0 30rpx;
}
.main{
	width: 690rpx;
	height: 88vh;
	background: $white;
	border-radius: 10rpx;
	box-sizing: border-box;
	margin: 30rpx;
	padding-top: 15rpx;
	
	.item{
		@include between;
		position: relative;
		padding: 15rpx 30rpx;
		
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			width: 124rpx;
		}
		input{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			width: 490rpx;
			height: 60rpx;
			background: #F8F8F8;
			border-radius: 20rpx;
			padding: 16rpx 26rpx;
			box-sizing: border-box;
			
			.place{
				font-size: 24rpx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #999999;
			}
		}
		.line{
			width: 630rpx;
			height: 1rpx;
			background: #E5E5E5;
			position: absolute;
			bottom: 0;
		}
		image{
			width: 16rpx;
			height: 30rpx;
			position: absolute;
			top: 30rpx;
			right: 56rpx;
		}
	}
	.isdefault{
		display: flex;
		align-items: center;
		position: relative;
		padding: 15rpx 30rpx;
		
		image{
			width: 70rpx;
			height: 60rpx;
		}
		text{
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #000000;
			width: 124rpx;
		}
	}
}
.btn{
	@include center
	position: fixed;
	bottom: 280rpx;
	left: 50%;
	transform: translateX(-50%);
	z-index:999;
	
	image{
		width: 560rpx;
		height: 70rpx;
	}
	text{
		font-size: 30rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #FFFFFF;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
	}
}
</style>
